
	<fieldset id="E01">
		<legend >{{name1}}</legend>
		<ul><!DOCTYPE html>
			<html>
			<head>
				<meta charset="UTF-8">
				<title>课堂练习题</title>
				<script src="../js/vue.js"></script>
				<style>
					/*斗篷样式*/
					[v-cloak]{
						display: none;
					}
					/* 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px*/
					.a{
						width: 120px;
						text-align: center;
						border: 1px solid blue;
						display: inline-block;
					}
					.b{
						padding: 5px;
					}
				</style>
			</head>
			<body>

			<li>{{people1}}</li>
			<li>{{people2}}</li>
			<li>{{people3}}</li>
		</ul>
	</fieldset>


	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山", 并且让其内容不可改变
	2.在三个 li 中 写入三个水浒英雄的名字
	*/
	var v = new Vue({
		el:"#E01",
		data:{
			name1:"水泊梁山",
			people1:"宋江",
			people2:"卢俊义",
			people3:"吴用"
		}
	})
	</script>

	<fieldset id="E02">
		<legend v-cloak>{{name1}}</legend>
		<ul>
			<li v-html="people1"></li>
			<li v-html="people2"></li>
			<li v-html="people3"></li>
		</ul>
	</fieldset>
	<script type="text/javascript">
	/**
	1.在legend中写入 "水泊梁山" 并加上"斗篷"
	2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
	*/
	var v = new Vue({
		el:"#E02",
		data:{
			name1:"水泊梁山",
			people1:"<a href = '#'>宋江</a>",
			people2:"<a href = '#'>卢俊义</a>",
			people3:"<a href = '#'>吴用</a>"
		}
	})
	</script>


	<fieldset id="E03">
		<legend>练习题3: 计算属性</legend>
		<dl>
			<dt></dt>
			<dd>力量:{{power}}</dd>
			<dd>智力:{{intel}}</dd>
			<dd>敏捷:{{agile}}</dd>
			<dd>综合战力:{{combatPower}}</dd>
		</dl>
	</fieldset>
	<script type="text/javascript">
	var heroe = {name:"花和尚鲁智深",power:98, intel:76, agile:73};
	/**
	1. 将 heroe 对象的值设置到 dl 中
	3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
	*/
	var v = new Vue({
		el:"#E03",
		data:{
			power:heroe.power,
			intel:heroe.intel,
			agile: heroe.agile
		},
		computed:{
			combatPower(){
				return this.power+this.intel+this.agile;
			}
		}

	})
	</script>


	<fieldset id="E04">
		<legend >练习题4: 样式设置</legend>
		<div v-bind:class="['a','b']">
			<img height="100px" width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"><br> <span ></span>
		</div>
		<div v-bind:class="['a','b']">
			<img  height="100px" width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"><br> <span ></span>
		</div>
		<div v-bind:class="['a','b']">
			<img  height="100px" width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"><br> <span ></span>
		</div>
	</fieldset>

	<script type="text/javascript">
	/**
	1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
	2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
	3. 给 span 添加英雄名字
	*/
	var v = new Vue({
		el:"#E04",
		data:{
		},
		methods:{
		}
	})

	</script>


	<style>
	.border {
		border: 2px solid blue;
	}
	
	.text {
		color: red;
		text-align: center;
	}
	
	.size {
		width: 150px;
		height: 150px; padding : 5px;
		display: inline-block;
		margin: 5px;
		padding: 5px;
	}
	</style>
	<fieldset id="E05">
		<legend>练习题5: class属性</legend>
		<div id="div1" v-bind:class="['size']">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div2" v-bind:class="{size:aFlag,border:bFlag}">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div3"  v-bind:class="{size:aFlag,border:bFlag,text:cFlag}">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"> 
			<br> 关注样式
		</div>
	</fieldset>
	<script type="text/javascript">
	/**
	1. 将 .size 样式应用到 div1 上 ( 数组方式)
	2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
	2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
	*/
	var vue= new Vue({
		el:"#E05",
		data:{
			aFlag:true,
			bFlag:true,
			cFlag:true
		}
	});
	</script>


</body>
</html>